<template>
  <div :class="lcd_setter_class">
    <config-item :title="title + '大小'">
        <template #content>
          <size
            @update:width="handleWidth"
            :width.sync="width"
            @update:height="handleHeight"
            :height.sync="height"
          />
        </template>
      </config-item>
  </div>
</template>

<script>
import set from '@/mixins/setter.js';

import lcd_engine from "@/lcd.engine.js";

const { renderer } = lcd_engine;

import { KEY } from './constant';

export default {
  name: `lcd-setter-${KEY}`,
  mixins: [set],
  data() {
    return {
      width: renderer.width,
      height: renderer.height,
    }
  },
  computed: {
    lcd_setter_class() {
      return `lcd-setter-${KEY}`
    }
  },
  watch: {
    restore: {
      handler(val, oldVal) {
        if (val) {
          this.main()
        }
      },
    },
  },
  methods: {
    handleWidth(w) {
      this.handleCanvasStyle({
        ...this.canvasStyle,
        width: Number(w)
      })
    },
    handleHeight(h) {
      this.handleCanvasStyle({
        ...this.canvasStyle,
        height: Number(h)
      })
    },
    initialize() {
      // attr
      this.width = renderer.width
      this.height = renderer.height
      this.handleWidth(this.width)
      this.handleHeight(this.height)
    },
    replicate() {
      // attr
      this.width = this.schema.width
      this.height = this.schema.height
      this.handleWidth(this.width)
      this.handleHeight(this.height)
    },
    main() {
      if (renderer.width == this.canvasStyle.width && renderer.height == this.canvasStyle.height) {
        this.initialize()
      } else {
        this.replicate()
      }
    },
  },
  mounted() {
    this.main()
  },
}
</script>
